<template>
  <div :class="[changeDirection,'flex-fluid']">
    <div class="flex-row items"
         :class="[v.disabled ? 'disabled':'']"
         v-for="(v, index) in items"
         :key="index"
         :style="{marginRight: index + 1 === items.length ? '' : '20px'}"
         @click="select(v)">
      <div class="icon-box"
           v-if="v.value === value">
        <text class="icon"
              :style="{color:selectedColor, fontSize: `${iconSize}px`}">&#xebe5;</text>
      </div>
      <div class="icon-box"
           v-if="v.value !== value">
        <text class="icon"
              :style="{color:unSelectedColor, fontSize: `${iconSize}px`}">&#xeb99;</text>
      </div>
      <text class="radio-label"
            :style="{'font-size':fontSize}">{{v.title || v.value}}</text>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: {
    value: {
      type: String,
    },
    direction: {
      type: String,
      default: 'horizontal' // horizontal | vertical
    },
    items: {
      type: Array,
      default: []
    },
    fontSize: {
      type: [String, Number],
      default: 32
    },
    iconSize: {
      type: [String, Number],
      default: 32
    },
    selectedColor: {
      type: String,
      default: '#00cc66'
    },
    unSelectedColor: {
      type: String,
      default: '#e2e2e2'
    }
  },
  computed: {
    changeDirection() {
      return this.direction == 'horizontal' ? 'flex-row' : 'flex-column';
    }
  },
  data() {
    return {
    }
  },
  methods: {
    select(v) {
      if (v.disabled) {
        return
      }
      this.$emit('change', v.value)
      this.$emit('input', v.value)
    }
  },
}
</script>

<style lang="scss" scoped>
.icon {
  font-family: alicon;
}
.flex {
  flex: 1;
}
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-fluid {
  flex-wrap: wrap;
}

.radio-box {
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
}

.radio-label {
  font-size: 30px;
  margin-left: 5px;
}

.disabled {
  opacity: 0.5;
}

.icon-box {
  margin-right: 5px;
}

.items {
  align-items: center;
}
</style>


